<template>
  <div>
    <el-input
      ref="tsInput"
      v-model="temp"
      :placeholder="placeholder"
      style="width:360px;"
      :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
      size="medium"
      readonly="readonly"
      @click.native="deptogglePanel($event)"
    />

    <div v-show="showTree" ref="tableList" class="treeDiv">
      <el-table
        ref="moviesTable"
        :data="rows"
        style="width: 360px"
        border
        max-height="250"
        :row-style="{height:'14px'}"
        :cell-style="getCellStyle"
        :header-cell-style="getHeaderCellStyle"
        @row-click="handleRegionNodeClick"
      >
        <el-table-column
          v-if="multiSelect"
          type="selection"
          width="55"
        />
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <el-pagination style="float: right" layout="prev, pager, next" :page-size="pageSize" :current-page.sync="page" :total="total" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { initData } from '@/api/data'
import { isArray } from '@/utils'
export default {
  name: 'TableSelect',
  props: {
    name: {
      type: String,
      default: null
    },
    pageSize: {
      type: Number,
      default: 5
    },
    multiSelect: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: null
    },
    url: {
      type: String,
      default: null
    },
    columns: {
      type: Array,
      default: function() { return [] }
    },
    value: {
      type: String
    }
  },
  data() {
    return {
      showTree: false,
      rows: [],
      total: 0,
      page: 0,
      temp: this.value
    }
  },
  watch: {
    showTree(newVal, oldVal) {
      !newVal && this.multiSelect ? this.handlerMultiSelect() : null
    }
  },
  methods: {
    // 用户
    getMemberList(page) {
      if (this.url == null) return
      initData(this.url, { page: page, size: this.pageSize }).then(data => {
        this.total = data.totalElements
        this.rows = data.content
        this.page = page
      })
    },
    // 表格css
    getCellStyle() {
      return 'text-align:center;'
    },
    getHeaderCellStyle() {
      return 'background: rgba(9, 37, 56,0.1);text-align:center; background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 4px 5px;'
    },
    // 点击input 阻止冒泡 控制table显示隐藏
    deptogglePanel(event) {
      event || (event = window.event)
      event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
      this.showTree ? this.tableHide() : this.tableShow()
    },
    tableShow() {
      if (!isArray(this.rows)) {
        this.getMemberList(0)
      }
      this.showTree = true
      document.addEventListener('click', this.tableHideList, false)
    },
    tableHide() {
      this.showTree = false
      document.addEventListener('click', this.tableHideList, false)
    },
    tableHideList(e) {
      if (this.$refs.tableList && !this.$refs.tableList.contains(e.target)) {
        this.tableHide()
      }
    },
    // 点击table节点
    handleRegionNodeClick(data) {
      this.showTree = false
      this.temp = data[this.name]
      this.$emit('select', data)
    },
    handlerMultiSelect() {
      let data = this.$refs.moviesTable.selection; let t = []
      if (data instanceof Array) {
        data.forEach((d, i) => {
          t[i] = d[this.name]
        })
      }
      debugger
      this.showTree = false
      this.temp = t.join(',')
      this.$emit('select', data)
    },
    handleCurrentChange(val) {
      debugger
      this.getMemberList(val)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.treeDiv{
  margin-top: 1px;
  z-index: 1000;
  width: 360px;
  overflow: auto;
  max-height: 300px;
  border: 1px solid #dcdfe6;
  position: absolute;
  .el-table{
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  .el-table td{
    padding: 4px 0;
  }
}
</style>
